<template>
	<view class="ai-chat-btn" @click="openAIChat">
		<text class="ai-icon">🤖</text>
		<text class="ai-text">{{ buttonText }}</text>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// 定义Props接口
interface Props {
	buttonText?: string;
	context?: Record<string, any>;
	question?: string;
}

// 定义Props，使用withDefaults提供默认值
const props = withDefaults(defineProps<Props>(), {
	buttonText: 'AI助手',
	context: () => ({}),
	question: ''
});

// 打开AI聊天页面
const openAIChat = () => {
	// 构建URL参数
	let url = '/pages/ai-chat/index';
	const params: string[] = [];
	
	// 添加上下文参数
	if (props.context && Object.keys(props.context).length > 0) {
		params.push(`context=${encodeURIComponent(JSON.stringify(props.context))}`);
	}
	
	// 添加初始问题参数
	if (props.question) {
		params.push(`question=${encodeURIComponent(props.question)}`);
	}
	
	// 拼接完整URL
	if (params.length > 0) {
		url += '?' + params.join('&');
	}
	
	// 跳转到AI聊天页面
	uni.navigateTo({ url });
};
</script>

<style scoped lang="scss">
/* AI聊天按钮 */
.ai-chat-btn {
	position: fixed;
	right: 32rpx;
	bottom: 120rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 999;
}

.ai-chat-btn:active {
	transform: scale(0.95);
}

.ai-icon {
	font-size: 48rpx;
	margin-bottom: 4rpx;
}

.ai-text {
	font-size: 20rpx;
	color: #fff;
	font-weight: 500;
}

/* 悬浮动画 */
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
}

.ai-chat-btn {
	animation: float 3s ease-in-out infinite;
}
</style>
